<template>
  <div id="uploader_box">
    <div
      v-for="(item,index) in tempImgs"
      v-show="!item.is_online || item.is_online === 0"
      :key="index"
      class="uploader_item"
    >
      <img :src="item.image_url" class="avatar" alt="">
      <div class="uploader_icon">
        <span class="uploader_icon_item">
          <el-upload
            class="reupload_icon"
            action="#"
            :show-file-list="false"
            :before-upload="reBefoUpload"
            :on-change="(file, fileList) => {handleChange(file, fileList, 'replace')}"
          >
            <i slot="trigger" class="el-icon-upload2" @click="getIndex(index)" />
          </el-upload>
        </span>
        <span class="uploader_icon_item" style="margin-left:10px;" @click="deleteImage(index, item)">
          <i class="el-icon-delete" />
        </span>
      </div>
    </div>
    <el-upload
      v-if="!tempImgs.length"
      ref="upload"
      multiple
      class="card_upload_button"
      action="#"
      :accept="fileAccept"
      :limit="imgLimit"
      :file-list="fileList"
      :show-file-list="false"
      :auto-upload="false"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-change="(file, fileList) => {handleChange(file, fileList, 'add')}"
    >
      <div
        style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999999;"
      >
        <i class="el-icon-circle-plus-outline avatar-uploader-icon" />
        <span>添加上传</span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt>
    </el-dialog>
  </div>
</template>

<script>
import { Base64 } from 'js-base64'

export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    imgLimit: Number,
    // eslint-disable-next-line vue/require-default-prop
    keyWord: String,
    // eslint-disable-next-line vue/require-default-prop
    warnTxt: String,
    defaultData: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: function () {
        return []
      }
    },
    // eslint-disable-next-line vue/require-default-prop
    beforeUpload: Function,
    // eslint-disable-next-line vue/require-default-prop
    imageRemove: Function,
    // eslint-disable-next-line vue/require-default-prop
    uploadSucc: Function
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      index: 0,
      tempImgs: [],
      fileAccept: '.gif,.jpeg,.png,.jpg,.GIF,.JPG,.PNG', // 上传的文件类型
      fileList: [] // 文件列表
    }
  },
  watch: {
    defaultData: {
      handler() {
        if (this.defaultData.length > 0) {
          this.tempImgs = this.defaultData
        } else {
          this.tempImgs = []
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    // 上传图片之前
    beforeAvatarUpload(file) {
      this.beforeUpload(file)
    },
    // 删除图片
    deleteImage(index) {
      this.imageRemove(this.keyWord, index)
    },
    // 获取重新上传序号
    getIndex(index) {
      this.index = index
    },
    // 重新上传前
    reBefoUpload(file) {
      this.beforeUpload(file)
    },
    handleSuccess() {
    },
    handleError() {
    },
    handleChange(file, fileList, type) {
      if (file.status !== 'ready') return
      let data = this.$cookies.get('ossParams')
      if (!data) {
        this.$message.error('上传失败，缺少ossParams')
        return
      }
      data = JSON.parse(Base64.decode(data))

      this.$upload(data, file).then(res => {
        if (type && type === 'add') {
          this.uploadSucc(this.keyWord, this.index, { image_url: res }, 'add')
        } else if (type && type === 'replace') {
          this.uploadSucc(this.keyWord, this.index, { image_url: res }, 'replace')
        }
      })
    }
  }
}
</script>
<style>
#uploader_box {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.el-upload {
  border: 1px dashed #DDDDDD;
  border-radius: 4px;
  height: 140px;
}

#uploader_box .uploader_item {
  overflow: hidden;
  background-color: #fff;
  border: 1px dashed #DDDDDD;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 140px;
  height: 140px;
  margin: 0 8px 8px 0;
  display: inline-block;
  position: relative;
  transition: all .5s cubic-bezier(.55, 0, .1, 1);
  padding: 10px;
}

#uploader_box .reupload_icon {
  width: 20px;
  height: 22px;
}

#uploader_box .reupload_icon .el-upload {
  width: 20px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#uploader_box .reupload_icon .el-upload__input {
  width: 20px;
  height: 22px;
}

#uploader_box .avatar-uploader {
  width: 140px;
  height: 140px;
  display: inline-block;
  margin: 0 0 8px 0;
  box-sizing: border-box;
}

#uploader_box .avatar-uploader .el-upload {
  width: 140px;
  height: 140px;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

#uploader_box .avatar-uploader .el-upload:hover {
  border-color: #f76b1c;
}

#uploader_box .avatar-uploader-icon {
  font-size: 28px;
  color: #DDDDDD;
  width: 140px;
  text-align: center;
}

#uploader_box .avatar {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: cover;
}

#uploader_box .upload_box {
  height: 140px;
  display: flex;
  align-items: flex-end;
}

#uploader_box .uploader_icon {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

#uploader_box .uploader_icon:hover {
  opacity: 1;
}

#uploader_box .uploader_icon::after {
  display: inline-block;
  content: "";
  height: 100%;
  vertical-align: middle;
}

#uploader_box .uploader_icon_item {
  width: 20px;
  height: 22px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
</style>
